<template>
	<view class="suggestion">

		<alert ref="alert" id="alert" @know="link_to(2)" />

		<view class="mysuggest">
			<image style="display: block;width: 100%;" :src="IMGLink + '/my/suggestion/mysuggest.png'" mode="widthFix">
			</image>
			<view class="mtsugc" @click="link_to(1)"></view>
		</view>

		<view class="sugbox">
			<view class="sugtit">
				<text class="tit1">问题反馈类型</text>
				<text class="tit2">(<text class="red">*</text>必选项)</text>
			</view>
			<view class="btnbox">
				<view class="btn" :class="[chosed == key ? 'chosed' : '']" v-for="(value, key) in types" :key="key"
					@click="chooseFun(key)">
					{{value}}
				</view>
			</view>
			<view class="textbox">
				<textarea class="textarea" v-model="content" :placeholder="placeholderText"
					style="box-sizing: border-box!important;" placeholder-class="placeholder"
					maxlength="100"></textarea>
				<view class="len"><text class="len_cnt">{{content.length ? content.length : 0}}</text>/100
				</view>
			</view>

			<view class="imgbox">
				<view class="addimgbox" v-if="images && images.length > 0" v-for="(item, index) in images" :key="index">
					<icon class="imgclose" type="clear" size="20" @click="deleteFun(index)"></icon>
					<view class="box">
						<image class="addimg" :src="item.imgUrl" mode="widthFix"></image>
					</view>
				</view>
				<image class="addimg" @click="chooseImg" :src="IMGLink + '/my/suggestion/addimg.png'" mode="widthFix">
				</image>
			</view>

			<view class="phonebox">
				<text class="mobiletext">手机号(*必填项):</text>
				<input class="mobile" type="number" maxlength="11" v-model="mobile" />
			</view>

			<button class="submitbtn" type="default" :disabled="btnState" @click="submitFun">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js'
	import {
		suggestType,
		sendSuggest
	} from "@/api/my/my.js"
	import {
		uploadimg
	} from "@/api/uploadimg.js"
	import {
		mapState
	} from "vuex"
	import alert from "./suggestalert.vue"
	export default {
		data() {
			return {
				IMGLink: this.IMGLink,
				types: null,
				chosed: null,
				content: "",
				placeholderText: "请选择反馈类型，并填写10字以上的反馈，我们将尽快为您解决…",
				images: [],
				mobile: this.$store.state.userinfo.mobile
			}
		},
		components: {
			alert
		},
		onLoad() {
			suggestType().then(({
				data: {
					type: types
				}
			}) => {
				this.types = types
			})
		},
		onShow() {
			uni.hideLoading()
		},
		computed: {
			...mapState(["userinfo"]),
			btnState() {
				let reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
				return !(this.chosed !== null && this.content.length >= 10 && reg.test(this.mobile))
			}
		},
		methods: {
			link_to(type) {
				uni.navigateTo({
					url: `/pagesA/my/suggestion/mysuggeslist?type=${type}`
				})
			},
			chooseFun(index) {
				this.chosed = index
			},
			deleteFun(index) {
				this.images.splice(index, 1)
			},
			chooseImg() {
				uni.chooseImage({
					sizeType: "original",
					success: res => {
						if (res.errMsg === "chooseImage:ok") {
							let imglist = res.tempFiles
							this.upload(imglist)
						}
					}
				})
			},

			async upload(imglist) {
				uni.showLoading({
					title: '上传中'
				})

				let len = imglist.length
				let postList = []
				for (let i = 0; i < len; i++) {
					let name = imglist[i].path.split('.')[0]
					let path = await pathToBase64(imglist[i].path)
					let fun = new Promise((resolve, reject) => {
						uploadimg({
							file: path
						}).then(res => {
							this.images.push(res.data)
							// this.$set(this.images, this.images.length, res.data)
							if (res.code == 200) {
								resolve(res)
							} else {
								reject(res)
							}
						}).catch(err => {
							reject(err)
						})
					})
					postList.push(fun)
				}

				Promise.all(postList).then(res => {
					// console.log(res)
				}).catch(err => {
					// console.log(err)
				}).finally(() => {
					uni.hideLoading()
				})
			},

			submitFun() {

				let imgs = [];
				if (this.images.length > 0) {
					this.images.map(item => {
						imgs.push(item.imgUrl)
					})
				}

				sendSuggest({
					type: this.chosed,
					content: this.content,
					images: imgs,
					mobile: this.mobile
				}).then(res => {
					if (+res.code === 200) {
						this.$refs.alert.showFun()
						this.clear()
					}
				}).catch(err => {
					console.log(err)
				})
			},

			clear() {
				this.chosed = null;
				this.content = "";
				this.images = [];
				this.mobile = this.userinfo.mobile;
			}
		}
	}
</script>

<style>
	page {
		background-color: white;
	}
</style>
<style scoped>
	.mysuggest {
		width: 100%;
		height: auto;
		position: relative;
	}

	.mtsugc {
		position: absolute;
		top: 50%;
		right: 26rpx;
		transform: translate(0, -50%);
		width: 166rpx;
		height: 48rpx;
	}

	.sugbox {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 24rpx 0;
	}

	.tit1 {
		font-size: 32rpx;
		color: #070707;
		font-weight: bold;
	}

	.tit2 {
		font-size: 24rpx;
		color: #070707;
	}

	.red {
		color: #F54642;
	}

	.btnbox {
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.btn {
		width: 30%;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
		border: 1px solid #cfcfcf;
		font-size: 26rpx;
		color: #8a8a8a;
		text-align: center;
	}

	.btn.chosed {
		color: #F54642;
		border: 1px solid #F54642;
	}

	.textarea {
		width: 100%;
		height: 300rpx;
		border: 1px solid #e2e2e2;
		box-sizing: border-box;
		padding: 20rpx;
	}

	/deep/ .placeholder {
		font-size: 24rpx;
		color: #b4b4b4;
		line-height-step: 40rpx;
	}

	.textbox {
		position: relative;
		width: 100%;
		height: 300rpx;
	}

	.len {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		font-size: 24rpx;
		color: #B4B4B4;
	}

	.len_cnt {
		color: #F54642;
	}

	.imgbox {
		margin: 42rpx auto 0;
		width: 100%;
		height: auto;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.addimgbox {
		margin: 0 32rpx 40rpx 0;
		width: 144rpx;
		height: 144rpx;
		position: relative;
	}

	.addimgbox .box {
		width: 144rpx;
		height: 144rpx;
		overflow: hidden;
		border: 1px dashed gray;
	}

	.addimg {
		width: 144rpx;
		height: auto;
	}

	.imgclose {
		position: absolute;
		top: -20rpx;
		right: -20rpx;
	}

	.phonebox {
		margin: 20px auto 0;
		width: 100%;
		height: 92rpx;
		background-color: #F1F1F1;
		border-radius: 8rpx;
		line-height: 92rpx;
		color: #4B4B4B;
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.mobiletext {
		display: inline-block;
		vertical-align: middle;
	}

	.mobile {
		display: inline-block;
		vertical-align: middle;
		width: 50%;
		height: 92rpx;
		line-height: 92rpx;
	}

	/deep/ button[disabled][type=default] {
		background-color: #FAAEAD;
		color: white;
	}

	.submitbtn {
		margin: 94rpx auto 0;
		width: 89%;
		height: 82rpx;
		line-height: 82rpx;
		text-align: center;
		background-color: #F54642;
		font-size: 32rpx;
		color: white;
		border-radius: 82rpx;
	}
</style>
